<template>
	<div class="opnion-image">

		<div class="common-wrap">
			<div class="common-wrap-head">信息热度</div>
			<div class="common-wrap-body">
				<div id="ads"></div>
			</div>
		</div>

		<div class="common-wrap">
			<div class="common-wrap-head">关键词云</div>
			<div class="common-wrap-body" id="wordCloud">
				<!-- <canvas id="wordCloud" style="width:100%;"></canvas> -->
			</div>
		</div>

		<div class="common-wrap">
			<div class="common-wrap-head">媒体来源</div>
			<div class="common-wrap-body">
				<canvas id="mediaChart" style="width:100%;"></canvas>
			</div>
		</div>

		<div class="common-wrap">
			<div class="common-wrap-head">高频词汇</div>
			<div class="common-wrap-body">
				<div class="words-title">
                    <i class="words-title-icon">
                        <img src="../../assets/positive.png">
                    </i>
                    <span>正面</span>
                </div>
                <div class="words-wrap">
                    <div class="words-cell" v-for="item in positiveWords">{{ item }}</div>
                </div>

                <div class="words-title">
                    <i class="words-title-icon">
                        <img src="../../assets/negative.png">
                    </i>
                    <span>负面</span>
                </div>
                <div class="words-wrap negative-words">
                    <div class="words-cell" v-for="item in negativeWords">{{ item }}</div>
                </div>
			</div>
		</div>

	</div>
</template>

<script>
import { getOpinionTrend, getWordCloud, getMediaOri, getOpinionPositive, getOpinionNegative } from '@/api/data';
import G2 from '@antv/g2';
import echarts from 'echarts';
import DataSet from '@antv/data-set';
import DataInfoFigure from '@/core/utils/data-charts-figure';

export default {
    name: 'OpinionImage',
    data() { 
    	return {
	       positiveWords:[],
           negativeWords:[],
    	};
    },
    mounted() {
    	// this.drawMainRadar();
        this.getBarChart();
        this.getOpinionTrendData();
        this.getWordCloudData();
        this.getOpinionPositiveData();
        this.getOpinionNegativeData();
    },
    methods: {
        getOpinionTrendData() {
            getOpinionTrend().then((res) => {
                let myChart = echarts.init(document.getElementById('ads'));
                myChart.setOption(DataInfoFigure.getOpinionTrendChart(res.data.data_info));
            }).catch((err) => {
                console.log(err);
            });
        },
        getWordCloudData() {
            getWordCloud().then((res) => {

                function getTextAttrs(cfg) {
                    return _.assign({}, cfg.style, {
                        fillOpacity: cfg.opacity,
                        fontSize: cfg.origin._origin.size,
                        rotate: cfg.origin._origin.rotate,
                        text: cfg.origin._origin.text,
                        textAlign: 'center',
                        fontFamily: cfg.origin._origin.font,
                        fill: cfg.color,
                        textBaseline: 'Alphabetic'
                    });
                }

                // 给point注册一个词云的shape
                G2.Shape.registerShape('point', 'cloud', {
                    drawShape: function drawShape(cfg, container) {
                        var attrs = getTextAttrs(cfg);
                        return container.addShape('text', {
                            attrs: _.assign(attrs, {
                                x: cfg.x,
                                y: cfg.y
                            })
                        });
                    }
                });

                var dv = new DataSet.View().source(res.data.data_list);

                // console.log(dv);
                var range = dv.range('value');
                var min = range[0];
                var max = range[1];
                dv.transform({
                    type: 'tag-cloud',
                    fields: ['name', 'value'],
                    size: [window.innerWidth - 30, 260],
                    font: 'Verdana',
                    padding: 0,
                    timeInterval: 5000, // max execute time
                    rotate: function rotate() {
                      var random = ~~(Math.random() * 4) % 4;
                      if (random == 2) {
                        random = 0;
                      }
                      return random * 90; // 0, 90, 270
                    },
                    fontSize: function fontSize(d) {
                      // console.log(d.value);
                      if (d.value) {
                        return (d.value - min) / (max - min) * (50 - 28) + 22;
                      }
                      return 0;
                    }
                });
                var chart = new G2.Chart({
                    container: 'wordCloud',
                    width: window.innerWidth - 30,
                    height: 260,
                    padding: 0
                });
                chart.source(dv, {
                    x: {
                      nice: false
                    },
                    y: {
                      nice: false
                    }
                });
                chart.legend(false);
                chart.axis(false);
                chart.tooltip({
                    showTitle: false
                });
                chart.coord().reflect();
                chart.point().position('x*y').color('name').shape('cloud').tooltip('value*name',(value,name) => {
                    return {
                        value: name+'( '+value + ' )'
                    };
                });
                chart.render();
            }).catch((err) => {
                console.log(err);
            });
        },
        getBarChart() {

            getMediaOri().then((res) => {
                var data = res.data.data_list;
                var chart = new this.$F2.Chart({
                  id: 'mediaChart',
                  pixelRatio: window.devicePixelRatio
                });
 
                chart.source(data, {
                  value: {
                    tickCount: 5
                  }
                });
                chart.scale('value', {
                    // 各个属性配置
                    // ticks: [ 0, 2, 100, 150, 200, 300, 500 ]
                });
                chart.legend(false);
                chart.tooltip({
                  showItemMarker: false,
                  onShow: function onShow(ev) {
                    var items = ev.items;
                    items[0].name = null;
                    items[0].name = items[0].title;
                  }
                });
                chart.interval().position('sources*value').color('sources','#D4B686').style('value',{
                    radius: function radius(val) {
                        return  [9, 9, 0, 0] ;
                    }
                }).size(18);
                chart.render();
            }).catch((err) => {
                console.log(err);
            });
            
        },
        getOpinionPositiveData() {
            getOpinionPositive().then((res) => {
                this.positiveWords = res.data.data_list;
            }).catch((err) => {
                console.log(err);
            });
        },
        getOpinionNegativeData() {
            getOpinionNegative().then((res) => {
                this.negativeWords = res.data.data_info;
            }).catch((err) => {
                console.log(err);
            });
        }
  	}
};
</script>

<style>
.words-title{
    display: flex;
    margin-bottom:15px;
}
.g2-tooltip-value{
    margin-left:5px!important;
}
.words-title i.words-title-icon,.words-title i.words-title-icon img{
    width:35px;
    height: 35px;
}
.words-title span{
    font-size:14px;
    line-height: 30px;
    margin-left: 4px;
}
.words-wrap{
    display: flex;

    flex-wrap:wrap;
    margin-bottom: 10px;
    /*justify-content: space-between;*/
}
.words-cell{
    height: 26px;
    text-align: center;
    line-height: 26px;
    color:#C3A26D;
    background-color: #F4ECDF;
    padding:0 24px;
    font-size: 13px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 13px;
    float:left;
    flex-shrink:0;
}
.words-wrap.negative-words .words-cell{
    color: #9696A9;
    background-color: #D9DAE1;
}
#ads{
    height: 300px;
}
#wordCloud{
    min-height: 260px;
}
</style>